<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex d-flex md12>
        <v-layout row wrap>
          <v-flex d-flex md12>
            <v-layout row wrap>
              <v-flex md12>
                <v-btn round @click="add" dark color="cyan">
                  <v-icon>add</v-icon>
                  <span class="pl-2 subheading">新增公告</span>
                </v-btn>
              </v-flex>
              <v-flex d-flex md12>
                <v-layout row wrap>
                  <v-flex row>
                    <!-- 查询数据表格 -->
                    <v-data-table :loading="false" :headers="headers" :items="tableData" hide-actions class="elevation-1">
                      <v-progress-linear slot="progress"  color="teal" height="5"  v-if="showProgress" indeterminate></v-progress-linear>
                      <template slot="items" slot-scope="props">
                        <td class="text-xs-center subheading">{{ props.item.keyword }}</td>
                        <td class="text-xs-center subheading">{{ props.item.noticeType | nType}}</td>
                        <td class="text-xs-center subheading" width="54%">{{ props.item.content }}</td>
                        <td class="text-xs-center subheading">
                          <v-switch @change="switchChange(props.item)" :label="props.item.isValid == 1 ? '开启' : '关闭'" v-model="props.item.isValid"></v-switch>
                        </td>
                        <td class="text-xs-center">
                          <v-btn flat round dark color="green" class="mx-1" @click="edit(props.item)">
                            <span class="mx-1">编辑</span>
                            <v-icon color="green">edit</v-icon>
                          </v-btn>
                          <v-btn flat round dark color="red" class="mx-1" @click="del(props.item)">
                            <span class="mx-1">删除</span>
                            <v-icon color="red">delete</v-icon>
                          </v-btn>
                        </td>
                      </template>
                      <!-- 没有数据时显示的提示 -->
                      <template slot="no-data">
                        <div class="text-md-center">
                          <v-icon color="yellow darken-3">warning</v-icon>
                          <span class="subheading">暂无数据</span>
                        </div>
                      </template>
                    </v-data-table>
                    <!-- 表格显示分页 -->
                    <div class="text-xs-center my-2">
                      <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
                    </div>
                    <v-layout>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>

          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-layout wrap column class="px-4">
            <v-flex sm8>
              <!-- <v-select :items="noticeTypes" label="公告类型" target="#dropdown-example"></v-select> -->
              <v-radio-group v-model="editedItem.noticeType">
                <v-radio v-for="(item, i) in noticeTypes" :key="i" :label="item.text" :value="item.value"></v-radio>
              </v-radio-group>
            </v-flex>
            
            <v-flex sm12 v-if="formTitle == '新增公告'">
               <v-switch :label="editedItem.isValid ? '开启' : '关闭'" v-model="editedItem.isValid"></v-switch>
            </v-flex>
            <v-flex sm12>
              <v-text-field prepend-icon="vpn_key" label="公告关键字" v-model="editedItem.keyword"></v-text-field>
            </v-flex>
            <v-flex sm12>
              <v-text-field prepend-icon="keyboard" label="公告内容" textarea v-model="editedItem.content"></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as game from "../../api/game";
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    modal: false,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 2,
      totalVisible: 7
    },
    announceType: 1,
    formTitle: "新增公告",
    modalText: "",
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData: [],
    headers: [
      { text: "关键字", value: "keyword", align: "center", sortable: false },
      { text: "类型", value: "noticeType", align: "center", sortable: false },
      { text: "公告内容", value: "content", align: "center", sortable: false },
      { text: "是否开启", value: "isValid", sortable: false, align: "center" },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      noticeId: 0,
      keyword: "",
      noticeType: "",
      content: "",
      isValid: 0
    },
    defaultItem: {
      keyword: "",
      noticeType: 1,
      content: "",
      isValid: 0,
      noticeId: 1
    },
    delItem: null,
    switchItem: null,
    noticeTypes: [
      { text: "全局公告", value: 1 },
      { text: "大厅公告", value: 2 },
      { text: "游戏房间公告", value: 3 },
      { text: "代理中心公告", value: 4 }
    ]
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getAnnounces();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getAnnounces();
      });
    });
    this.getAnnounces();
  },
  computed: {},
  filters: {
    nType(value) {
      if (!value) {
        return "";
      }
      const strVal = value.toString();
      switch (strVal) {
        case "1":
          return "全局公告";
        case "2":
          return "大厅公告";
        case "3":
          return "游戏房间公告";
        case "4":
          return "代理中心公告";
        default:
          return "暂未定义";
      }
    }
  },
  methods: {
    addAnnounce() {
      const opt = Object.assign({}, this.editedItem);
      console.log(opt);
      delete opt["noticeId"];
      game.addAnnounce.r(opt).then(({ data }) => {
        this.getAnnounces();
        this.dialog = false;
        if (data.result == 0) {
          $Vue.$emit("toggleSnackbar", {
            text: "新增公告成功"
          });
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: "新增公告失败"
          });
        }
      });
    },
    getAnnounces() {
      game.getAnnounces
        .r({ limit: this.limit, offset: this.offset })
        .then(({ data }) => {
          if (data.result === 0) {
            this.tableData = data.data.dataList;
            this.pagination.pageCount = data.data.totalCount
              ? Math.ceil(data.data.totalCount / this.limit)
              : 1;
          } else {
            $Vue.$emit("toggleSnackbar", {
              text: data.message
            });
          }
        });
    },
    deleteAnnounce() {
      game.deleteAnnounce.r({ id: this.delItem.noticeId }).then(({ data }) => {
        console.log(data);
        this.getAnnounces();
        this.modal = false;
        let msg = "公告已删除";
        if (data.result != 0) {
          msg = "删除失败";
        }
        $Vue.$emit("toggleSnackbar", {
          text: msg
        });

      });
    },
    editAnnounce() {
      const opt = Object.assign({}, this.editedItem);
      console.log(opt);
      game.editAnnounce.r(opt).then(({ data }) => {
        console.log(data);
        let msg = "公告已修改";
        if (data.result != 0) {
          msg = "修改失败";
        }
        $Vue.$emit("toggleSnackbar", {
          text: msg
        });
        this.dialog = false
        this.getAnnounces();
      });
    },
    toggleAnnounce() {
      let valid = this.switchItem.isValid ? 1 : 0;
      game.toggleAnnounce
        .r({ noticeId: this.switchItem.noticeId, isValid: valid })
        .then(({ data }) => {
          this.getAnnounces();
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        });
    },
    initialize() {
      this.tableData = [
        {
          keyword: "游戏公告",
          noticeType: "红中麻将",
          content:
            "需要把某种模式匹配到的所有路由，r 组件，对于所有 ID 各不相来渲染。",
          isValid: false,
          createTime: "2018-4-19"
        },
        {
          keyword: "钻石大赠送",
          noticeType: "俱乐部公告",
          content: "『路径参数』使用冒号 : 标记。当可以更新 User",
          isValid: true,
          createTime: "2018-4-19"
        }
      ];
    },
    edit(item) {
      this.editedIndex = this.tableData.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
      this.formTitle = "编辑公告";
    },
    del(item) {
      this.modal = true;
      this.modalText = "确认删除该条公告吗?";
      this.delItem = item;
    },
    add() {
      this.editedItem = Object.assign({}, this.defaultItem);
      this.dialog = true;
      this.formTitle = "新增公告";
    },
    switchChange(item) {
      this.switchItem = item;
      console.error(item);
      this.toggleAnnounce();
    },
    confirmDialog() {
      if (this.formTitle === "编辑公告") {
        this.editAnnounce();
      } else {
        this.addAnnounce();
      }
    },
    confirmModal() {
      this.deleteAnnounce();
    },
    pageChange(page) {
      this.getAnnounces(this.limit, (page - 1) * this.limit);
    }
  }
};
</script>

<style lang="less" scoped>
</style>

